<template>
  <div>
    <CloudTable
      class="test-table"
      :columns="columns1"
      :dataSource="dataSource"
      @change="tableChange"
    ></CloudTable>
  </div>
</template>

<script>
  export default {
    title: '4.可排序',
    subTitle: '可排序',
    data () {
      return {
        columns1: [
          {
            title: 'name',
            dataIndex: 'name',
            sorter: (a, b) => a.name.length - b.name.length,
          },
          {
            title: 'Age',
            dataIndex: 'age',
            sorter: (a, b) => a.age - b.age,
          },
          {
            title: 'Sex',
            dataIndex: 'sex',
            sorter: (a, b) => a.name.length - b.name.length,
          },
        ],
        dataSource: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            sex: '男'
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            sex: '女'
          },
          {
            key: '3',
            name: 'Joe Black',
            age: 32,
            sex: '男'
          },
        ],
      }
    },
    methods: {
      tableChange (pagination, filters, sorter, currentDataSource) {
      }
    }
  }
</script>

<style lang="scss">
</style>